<template>
  <div class="navbar">
    <div class="flx-wrap mt10">
      <div
        class="items"
        :class="datas.limit === 3 ? 'w33' : datas.limit === 4 ? 'w25' : 'w20'"
        v-for="(nav, ix) in datas.list"
        :key="ix"
      >
        <img class="img" :src="nav.image" />
        <el-text class="mt10" size="small">{{ nav.text }}</el-text>
      </div>
    </div>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script lang="ts" setup name="NavBar">
import { toRefs } from "vue";
const props = defineProps({
  datas: {
    type: Object
  }
});
const { datas } = toRefs(props);
</script>
<style lang="scss" scoped>
.navbar {
  background-color: #ffffff;
  .items {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    .img {
      display: block;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
    }
  }
}
</style>
